<template>
	<view class="type_box">
		<view class="item" @click="handleSort('distance')">
			<view class="title">
				距离
			</view>
			<u-icon v-if="distance=='asc'" size="20" style="margin-left: 6rpx;" name='arrow-down-fill' color="#DBDBDB">
			</u-icon>
			<u-icon v-else size="20" style="margin-left: 6rpx;" name='arrow-up-fill' color="#DBDBDB"></u-icon>
		</view>
		<view class="item" @click="handleSort('salesVolume')">
			<view class="title">
				销量
			</view>
			<u-icon v-if="salesVolume=='asc'" size="20" style="margin-left: 6rpx;" name='arrow-down-fill'
				color="#DBDBDB">
			</u-icon>
			<u-icon v-else size="20" style="margin-left: 6rpx;" name='arrow-up-fill' color="#DBDBDB"></u-icon>
		</view>
		<view class="item" @click="handleSort('price')">
			<view class="title">
				价格
			</view>
			<u-icon v-if="price=='asc'" size="20" style="margin-left: 6rpx;" name='arrow-down-fill' color="#DBDBDB">
			</u-icon>
			<u-icon v-else size="20" style="margin-left: 6rpx;" name='arrow-up-fill' color="#DBDBDB"></u-icon>
		</view>
		<!-- <view class="item">
			<view class="title">
				店铺
			</view>
			<u-icon name="arrow-up-fill" color="#DBDBDB"></u-icon>
		</view> -->
	</view>
</template>

<script>
	export default {
		props: {
			price: {
				type: String,
				default: 'asc'
			},
			distance: {
				type: String,
				default: 'asc'
			},
			salesVolume: {
				type: String,
				default: 'asc'
			}
		},
		data() {
			return {

			};
		},
		methods: {
			handleSort(typeKey) {
				this.$emit('handleSort', typeKey)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.type_box {
		display: flex;
		align-items: center;

		justify-content: space-around;

		.item {
			display: flex;
			align-items: center;

			.title {
				font-size: 28rpx;
				color: #101010;
				margin-right: 18rpx;
			}
		}
	}
</style>
